<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Declarative Dijit Layout</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dijit/themes/claro/document.css";
			@import "../../dijit/themes/claro/claro.css";
			@import "../css/skins/claro.css";
			html, body {
				padding: 0;
				width: 100%;
				height: 100%;
			}
			#bc {
				width: 99%;
				height: 99%;
			}
			.bcLeft {
				width: 300px;
			}
			.dijitDialog {
				width: 500px;
			}
		</style>
		<script src="../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script>
			// callbacks for button clicks
			function showDeclDialog(){ dlgDecl.show(); }
			
			// function to get a unique set of column definitions for each grid
			function getGridCols(){
				return {
					col1: 'Column 1',
					col2: {name: 'Column 2', sortable: false},
					col3: 'Column 3',
					col4: 'Column 4'
				};
			}
			
			require(["dgrid/OnDemandGrid",
				"dgrid/extensions/DijitRegistry",
				"dijit/Dialog",
				"dojo/_base/declare",
				"dojo/parser",
				// widgets only used declaratively
				"dijit/layout/BorderContainer",
				"dijit/layout/TabContainer",
				"dijit/Toolbar",
				"dijit/form/Button",
				// non-returns
				"dgrid/test/data/base",
				"dojo/domReady!"
			], function(Grid, DijitRegistry, Dialog, declare, parser){
			
				var CustomGrid = declare([Grid, DijitRegistry]);
				
				// Simply passing columns via data-dojo-props, don't want GridFromHtml
				window.dgrid = { Grid: CustomGrid };
				
				parser.parse();
			});
		</script>
	</head>
	<body class="claro">
		<div data-dojo-type="dijit.layout.BorderContainer" id="bc">
			<div data-dojo-type="dijit.Toolbar" class="bcTop"
				data-dojo-props="id:'tbTop', region:'top'">
				<span data-dojo-type="dijit.form.Button"
					data-dojo-props="onClick: showDeclDialog">
					Show declarative dialog
				</span>
			</div>
			<!-- left: dgrid as direct child -->
			<div data-dojo-type="dgrid.Grid" id="gridBCCP" class="bcLeft"
				data-dojo-props="region: 'left', splitter: true, store: testStore, columns: getGridCols()">
			</div>
			<!-- center: tabcontainer -->
			<div data-dojo-type="dijit.layout.TabContainer" class="bcCenter" id="tc"
				data-dojo-props="region: 'center'">
				<!-- initial tab: dgrid as direct child -->
				<div data-dojo-type="dgrid.Grid" id="gridTab1" class="gridTab"
					data-dojo-props="title: 'Tab 1', store: testStore, columns: getGridCols()">
				</div>
				<!-- tab 2: dgrid as direct child again, but not initially visible -->
				<div data-dojo-type="dgrid.Grid" id="gridTab2" class="gridTab"
					data-dojo-props="title: 'Tab 2', store: testStore, columns: getGridCols()">
				</div>
			</div>
		</div>
		<!-- declarative dialog w/ dgrid inside -->
		<div data-dojo-type="dijit.Dialog" id="dlgDecl" data-dojo-id="dlgDecl">
			<div data-dojo-type="dgrid.Grid" id="gridDlgDecl"
				data-dojo-props="store: testStore, columns: getGridCols()"></div>
		</div>
	</body>
</html>
